<template>
	<view class="bluetooth-page">
		<!-- 蓝牙功能入口 -->
		<view class="function-card" @click="goToBluetooth">
			<view class="card-icon">📱</view>
			<view class="card-content">
				<text class="card-title">蓝牙连接</text>
				<text class="card-desc">搜索并连接蓝牙设备，实时监听数据</text>
			</view>
			<view class="card-arrow">→</view>
		</view>
		<CoAppBottomBar />
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CoAppBottomBar from '@/components/app/bar/CoAppBottomBar.vue'

// 跳转到蓝牙页面
const goToBluetooth = () => {
	uni.navigateTo({
		url: '/pages/bluetooth/bluetooth'
	})
}
</script>

<style lang="scss" scoped>
.bluetooth-page {
	padding: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

.function-card {
	display: flex;
	align-items: center;
	padding: 40rpx 30rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
	transition: all 0.3s ease;
	width: 100%;
	max-width: 600rpx;
	
	&:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.2);
	}
	
	.card-icon {
		font-size: 60rpx;
		margin-right: 30rpx;
	}
	
	.card-content {
		flex: 1;
		
		.card-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #fff;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.card-desc {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			display: block;
			line-height: 1.4;
		}
	}
	
	.card-arrow {
		font-size: 40rpx;
		color: #fff;
		font-weight: bold;
	}
}
</style>